<div class="container-fluid">

  <app-page-title title="Projects" [breadcrumbItems]="breadCrumbItems"></app-page-title>
  <div class="row">
    <div class="col lg 12">
      <a [routerLink]="['/projects/view', routerId]" class="btn text-primary d-sm-inline-block btn-link"> <i class="mdi mdi-arrow-left mr-1"></i> go back</a>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          <!-- Load Spinner -->
          <ngx-spinner [fullScreen]="true" type="ball-clip-rotate-multiple" size="medium">
            <p class="loading">Loading, Please Wait...</p>
          </ngx-spinner>
          <aw-wizard [awNavigationMode] navigateBackward="deny" navigateForward="visited" [navBarLayout]="'large-empty-symbols'">
            <aw-wizard-step class="steps-in" [stepTitle]="'Checklist'" [navigationSymbol]="{ symbol: '1' }">
              <div class="tab-content">
                <form>
                  <div class="row">
                    <div class="col pt-3">
                      <h4>Platforms</h4>
                      <div class="form-group">
                        <label for="category-input">Select checklist type</label>
                        <select #mySelectCategory (change)="selectChecklistsOnChange(mySelectCategory.value)"
                          class="custom-select" id="category-input">
                          <option value="">--Select--</option>
                          <option *ngFor="let item of categoryData.items" value="{{item.id}}">{{item.name}}</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="card border shadow-none mb-3">
                    <div class="card-body">
                      <label for="category-input">Security Category selection</label><br>
                      - The security category selection gives you a different set of checklists that are correlated to different levels.<br>
                      - By default SKF comes with the OWASP-ASVS for the web/api security controls and OWASP-MASVS for mobile security controls.<br>
                      - Also you can modify the controls of the existing checklists in SKF or create your own new security checklist from scratch.<br>
                     </div>
                  </div>
                </form>
              </div>
              <ul class="list-inline wizard mb-0">
                <li class="next list-inline-item float-right"><button class="btn btn-primary" awNextStep>Next</button>
                </li>
              </ul>
            </aw-wizard-step>

            <aw-wizard-step [stepTitle]="'Maturity Level'" [navigationSymbol]="{ symbol: '2' }">
              <div class="tab-content">
                <form>
                  <div class="row">
                    <div class="col pt-3">
                      <h4>Maturity Level</h4>
                      <div class="form-group">
                        <label for="category-input">Select Category</label>
                        <select #mySelectMaturity (change)="selectMaturityOnChange(mySelectMaturity.value)"
                          class="custom-select" id="category-input">
                          <option value="">--Select--</option>
                          <option *ngFor="let item of maturityData" value="{{item.id}}">{{item.title}}</option>

                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="card border shadow-none mb-3">
                    <div class="card-body">
                      <label for="category-input">Security Maturity selection</label><br>
                      - The maturity level gives you a different set of security controls from the checklist that you selected based on the Maturity Level.<br>
                      - Level 1: Opportunistic, if it adequately defends against application security vulnerabilities that are easy to discover, and included in the OWASP Top 10 and other similar checklists.<br>
                      - Level 2: Standard, if it adequately defends against most of the risks associated with software today.<br>
                      - Level 3: Advanced, this level is typically reserved for applications that requires ignificant levels of security verification, such as those that maybe found within areas of military, health and safety, critical infrastructure, etc.<br>
                     </div>
                  </div>
                </form>
              </div>
              <ul class="list-inline wizard mb-0">
                <li class="previous list-inline-item"><button class="btn btn-primary" awPreviousStep>Previous</button>
                </li>
                <li class="next list-inline-item float-right"><button class="btn btn-primary" awNextStep>Next</button>
                </li>
              </ul>
            </aw-wizard-step>

            <aw-wizard-step class="steps-in" [stepTitle]="'Category'" [navigationSymbol]="{ symbol: '3' }">
              <div class="tab-content">
                <form>
                  <div class="row">
                    <div class="col pt-3">
                      <h4>Category</h4>
                      <div class="form-group">
                        <label for="category-input">Select Category</label>
                        <div *ngIf="checklistData">
                          <select #mySelectQuestion (change)="selectQuestionaireOnChange(mySelectQuestion.value)"
                            class="custom-select" id="category-input">
                            <option value="">--Select--</option>
                            <option *ngFor="let item of checklistData.items" value="{{item.id}}">{{item.title}}</option>
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="card border shadow-none mb-3">
                    <div class="card-body">
                      <label for="category-input">Security Expert system</label><br>
                      - The security expert system gives you an overview of the security controls in the different categories.<br>
                      - If you need more security controls from the other categories then you can simply add them in the project overview page.<br>
                    </div>                  
                  </div>
                </form>
              </div>
              <ul class="list-inline wizard mb-0">
                <li class="previous list-inline-item"><button class="btn btn-primary" awPreviousStep>Previous</button>
                </li>
                <li class="next list-inline-item float-right"><button class="btn btn-primary" awNextStep>Next</button>
                </li>
              </ul>
            </aw-wizard-step>
            <aw-wizard-step class="steps-in" [stepTitle]="'Questionnaire'" [navigationSymbol]="{ symbol: '4' }">
              <form #myForm="ngForm">
                <div class="tab-content">
                  <div class="row">
                    <div class="col pt-3">
                      <h4 class="mb-3">Configure this sprint</h4>
                      <div *ngIf="questionData">
                        <div class="row mb-2" *ngFor="let item of questionData.items; let i = index;">
                          <div class="col-9">
                            <p class="text-left font-size-15">{{item.question}}</p>
                          </div>
                          <div class="col-3">
                            <select ngModel name="answer{{i +1}}" id="answer{{i +1}}" class="custom-select text-right"
                                  id="category-input">
                                  <option value="">No</option>
                                  <option value="{{item.id}}" value="1">Yes</option>
                                  <option value="">N.A</option>
                                </select>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                
                <ul class="list-inline wizard mb-0">
                  <li class="previous list-inline-item"><button class="btn btn-primary" awPreviousStep>Previous</button>
                  </li>
                  <li class="next list-inline-item float-right"><button class="btn btn-primary"
                      (click)="storeSprintLocalStorage(myForm)" awNextStep>Next</button>
                  </li>
                </ul>
              </form>
            </aw-wizard-step>

            <aw-wizard-step class=" steps-in" [stepTitle]="'Setup'" [navigationSymbol]="{ symbol: '5' }">
              <div class="tab-content">
                <div class="row">
                  <div class="col pt-3">
                    <h4>Add a feature</h4>
                    <div class="form-group">
                      <label for="category-input">Select existing or new</label>
                      <select class="custom-select" #list (change)="onChange(list.value)">
                        <option value="" selected>--Select--</option>
                        <option value="old">Existing feature</option>
                        <option value="new">Create new feature</option>
                      </select>
                    </div>
                    <div class="card border shadow-none mb-3">
                      <div class="card-body">
                        <label for="category-input">Add results to sprint/feature</label><br>
                        - A sprint/feature stands for any functionality in your project that requires testing.<br>
                        - We can either start working on a new sprint/feature or we select to enchance an existing one with new or additional requirements! <br>
                      </div> 
                    <!-- <div class="dropdown-divider"></div> -->
                    </div>
                    <div class="row mb-5" *ngIf="selected == 'old'">
                      <label class="col-sm-2 col-form-label" for="old_quest">Sprint Name</label>
                      <div class="col-sm-10">
                        <select class="form-control" name="old_quest" id="old_quest" data-live-search="true" #old
                          (change)="oldSprint(old.value)">
                          <option value=0>--select--</option>
                          <option *ngFor="let item of sprintData" value="{{item.sprint_id}}">
                            {{item.title}}</option>
                        </select>
                      </div>
                    </div>

                    <div *ngIf="selected == 'new'">
                      <form [formGroup]="newSprintForm">
                        <div class="row mb-3">
                          <label class="col-sm-2 col-form-label" for="name">Sprint Name</label>
                          <div class="col-sm-10">
                            <input formControlName="name" class="form-control" type="text" id="name">
                          </div>
                        </div>

                        <div class="row mb-3">
                          <label class="col-sm-2 col-form-label" for="description">Sprint Description</label>
                          <div class="col-sm-10">
                            <textarea formControlName="description" class="form-control" id="description"
                              rows="3"></textarea>
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
              <ul class="list-inline wizard mb-0">
                <li class="previous list-inline-item"><button class="btn btn-primary"
                    awPreviousStep>Previous</button>
                </li>
                <li class="next list-inline-item float-right"><button class="btn btn-primary"
                    (click)="storeSprint()" awNextStep>Next</button>
                </li>
              </ul>
            </aw-wizard-step>

            <aw-wizard-step class="steps-in" [stepTitle]="'Finish'" [navigationSymbol]="{ symbol: '6' }">
              <div class="tab-content">
                <div class="row">
                  <div class="col pt-3">
                    <h4>Save Configuration</h4>
                    <div class="card border shadow-none mb-3">
                      <div class="card-body">
                        <label for="category-input">Store and correlate security controls</label><br>
                        - Click submit to store the project and the correlations done by SKF from the expert system!<br>
                      </div> 
                      <div *ngIf="disableSubmit == true" class="alert alert-danger" role="alert">
                        You forgot to add project sprint details, please do so to finish the wizard!
                      </div>
                      <!-- <div class="dropdown-divider"></div> -->
                    </div>
                  </div>
                </div>
              </div>
              <ul class="list-inline wizard mb-0">
                <li class="previous list-inline-item"><button class="btn btn-primary" awPreviousStep>Previous</button>
                </li>
                <li *ngIf="disableSubmit == false" class="next list-inline-item float-right"><button class="btn btn-primary" (click)="storeQuestions()"
                    awNextStep>Submit</button>
                </li> 
              </ul>
            </aw-wizard-step>
          </aw-wizard>
        </div>
      </div>
    </div>
  </div>
</div>